<template>
<div>
  <div>
    <div style="display: flex;justify-content: space-between">
      <div>
        <el-input v-model="advancedSearchParams.name" :disabled="advancedSearchShow" style="width: 300px;margin-right: 10px" prefix-icon="el-icon-search" placeholder="請輸入员工姓名进行搜索"></el-input>
        <el-button type="primary" icon="el-icon-search" :disabled="advancedSearchShow" @click="getEmps">搜索</el-button>
        <el-button type="primary" @click="advancedSearch">
          <i :class="advancedSearchShow? 'fa fa-angle-double-up' : 'fa fa-angle-double-down'" aria-hidden="true"></i>
          高级搜索</el-button>
      </div>

      <div>
        <el-button type="primary" icon="el-icon-plus" @click="handleAddEmp">添加员工</el-button>
        <el-upload
          :action="uploadUrl"
          style="display: inline-flex"
          :show-file-list="false"
          :before-upload="beforeUpload"
          :on-success="uploadSuccess"
          :on-error="uploadFail"
          :headers="headers"
        >
          <el-button type="success" :icon="importBtnIcon" :disabled="uploadDisabled">
            {{importBtnName}}
          </el-button>
          <!--        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
        </el-upload>

        <el-button type="success" @click="exportExcel" icon="el-icon-download">
          导出数据</el-button>

      </div>
    </div>
  </div>
  <transition name="slide-fade">
    <div v-show="advancedSearchShow" style="border:1px solid #ffd04b;border-radius: 5px;box-sizing: border-box;padding: 5px;margin: 10px 0px">

    <el-row>
      <el-col :span="4">
        <el-select @change="getEmps" v-model="advancedSearchParams.politicId" placeholder="政治面貌"  style="width: 150px;" :clearable="true">
          <el-option
            v-for="item in politicsSelect"
            :key="item.id"
            :label="item.name"
            :value="item.id"

          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select  @change="getEmps" v-model="advancedSearchParams.nationId" placeholder="民族"  style="width: 150px;" :clearable="true">
          <el-option
            v-for="item in nationsSelect"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select  @change="getEmps" v-model="advancedSearchParams.posId" placeholder="职位"  style="width: 150px;" :clearable="true">
          <el-option
            v-for="item in positionSelect"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select  @change="getEmps" v-model="advancedSearchParams.departmentId" placeholder="部门"  style="width: 150px;" :clearable="true">
          <el-option
            v-for="item in allDeps"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select  @change="getEmps" v-model="advancedSearchParams.engageForm" placeholder="聘用方式"  style="width: 150px;" :clearable="true">
          <el-option
            v-for="item in engageSelect"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row style="margin-top: 10px;">
<!--      <el-col :span="4">-->
<!--        <el-popover-->
<!--          placement="bottom"-->
<!--          title="请选择部门"-->
<!--          width="250"-->
<!--          trigger="manual"-->
<!--          v-model="popoverShow">-->
<!--          <el-tree-->
<!--            :default-expand-all="true"-->
<!--            :data = "allDeps"-->
<!--            :props="depProps"-->
<!--            @node-click="handleNodeClick"></el-tree>-->
<!--          <div-->
<!--            slot="reference"-->
<!--            style="width: 150px;display: inline-flex;border: 1px solid #dedede;-->
<!--                  height: 31px;border-radius: 5px;cursor: pointer;align-items: center;-->
<!--                  font-size: 13px;padding-left: 18px;box-sizing: border-box;-->
<!--                  color: #bbbbbb"-->
<!--            @click="getDeparments"-->
<!--          >-->
<!--            {{ departmentName }}-->
<!--            <i class="fa fa-angle-double-down" style="display: inline-flex; margin-left: 50px"></i>-->
<!--          </div>-->

<!--        </el-popover>-->
<!--      </el-col>-->
      <el-col :span="8">
        <el-date-picker
          @change="getEmps" @blur="getEmps"
          :clearable="true"
          v-model="beginDateScope"
          type="daterange"
          range-separator="至"
          start-placeholder="入职日期"
          end-placeholder="入职日期"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-col>
<!--      <el-col :span="5">-->
<!--        <el-button type="primary">取消</el-button>-->
<!--        <el-button type="primary">搜索</el-button>-->
<!--      </el-col>-->
    </el-row>
  </div>
  </transition>
  <div style="margin-top: 20px;">
    <el-table
      v-loading="loading"
      :data="empData"
      border
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        fixed
        prop="name"
        label="姓名"
        width="130">
      </el-table-column>
      <el-table-column
        prop="workID"
        label="工号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="gender"
        label="性別"
        width="120">
      </el-table-column>
      <el-table-column
        prop="birthday"
        label="生日"
        width="120">
      </el-table-column>
      <el-table-column
        prop="idCard"
        label="身份證號"
        width="120">
      </el-table-column>
      <el-table-column
        prop="wedlock"
        label="婚姻狀況"
        width="120">
      </el-table-column>
      <el-table-column
        prop="nation.name"
        label="民族"
        width="120">
      </el-table-column>
      <el-table-column
        prop="nativePlace"
        label="籍贯"
        width="120">
      </el-table-column>
      <el-table-column
        prop="politicsStatus.name"
        label="政治面貌"
        width="120">
      </el-table-column>
      <el-table-column
        prop="email"
        label="电子邮件"
        width="120">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="電話號碼"
        width="120">
      </el-table-column>
      <el-table-column
        prop="address"
        label="聯繫地址"
        width="120">
      </el-table-column>
      <el-table-column
        prop="department.name"
        label="所属部门"
        width="120">
      </el-table-column>
      <el-table-column
        prop="position.name"
        label="职位"
        width="120">
      </el-table-column>
      <el-table-column
        prop="engageForm"
        label="聘用形式"
        width="120">
      </el-table-column>
      <el-table-column
        prop="tiptopDegree"
        label="最高学历"
        width="120">
      </el-table-column>
      <el-table-column
        prop="school"
        label="学校"
        width="120">
      </el-table-column>
      <el-table-column
        prop="specialty"
        label="专业"
        width="120">
      </el-table-column>
      <el-table-column
        prop="workState"
        label="在职狀態"
        width="120">
      </el-table-column>
      <el-table-column
        prop="beginDate"
        label="入职日期"
        width="120">
      </el-table-column>
      <el-table-column
        prop="conversionTime"
        label="转正日期"
        width="120">
      </el-table-column>
      <el-table-column
        prop="beginContract"
        label="合同起始日期"
        width="120">
      </el-table-column>
      <el-table-column
        prop="endContract"
        label="合同截止日期"
        width="120">
      </el-table-column>
      <el-table-column
        prop="contractTerm"
        label="合同期限"
        width="120">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleUpdate(scope.row)" type="text" size="small">编辑</el-button>
          <el-button type="text" size="small" style="color:red;" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div  style="float: right;margin-top: 10px">
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-sizes="[5, 10, 20, 30, 40]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
<!--  添加员工表单 -->
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="80%"
    append-to-body>
    <div>
      <el-form ref="empForm" :model="addEmpParams" :rules="addEmpRules">
        <!--        第一行   姓名 性别 日期  政治面貌-->
        <el-row>
          <el-col :span="6">
            <el-form-item label="姓名" prop="name">
              <el-input prefix-icon="el-icon-edit" style="width: 200px;" v-model="addEmpParams.name" placeholder="员工姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="性別" prop="gender">
              <el-select v-model="addEmpParams.gender" style="width: 200px;" placeholder="性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出生日期" prop="birthday">
              <el-date-picker
                style="width: 200px;"
                v-model="addEmpParams.birthday"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="政治面貌" prop="politicId">
              <el-select v-model="addEmpParams.politicId" placeholder="政治面貌"  style="width: 200px;">
                <el-option
                  v-for="item in politicsSelect"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!--        第二行   -->
        <el-row>
         <el-col :span="6">
           <el-form-item label="民族" prop="nationId">
             <el-select v-model="addEmpParams.nationId" placeholder="民族"  style="width: 200px;">
               <el-option
                 v-for="item in nationsSelect"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id">
               </el-option>
             </el-select>
           </el-form-item>
         </el-col>
          <el-col :span="5">
            <el-form-item label="籍贯" prop="nativePlace">
              <el-input prefix-icon="el-icon-edit" style="width: 200px;" v-model="addEmpParams.nativePlace" placeholder="籍贯"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="电子邮箱" prop="email">
              <el-input prefix-icon="el-icon-email" style="width: 200px;" v-model="addEmpParams.email" placeholder="电子邮箱"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="电话号码" prop="phone">
              <el-input prefix-icon="el-icon-phone" style="width: 200px;" v-model="addEmpParams.phone" placeholder="电话号码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
<!--         第三行-->
        <el-row>
          <el-col :span="6">
            <el-form-item label="职位" prop="posId">
              <el-select v-model="addEmpParams.posId" placeholder="职位"  style="width: 200px;">
                <el-option
                  v-for="item in positionSelect"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="职称" prop="jobLevelId">
              <el-select v-model="addEmpParams.jobLevelId" placeholder="职称"  style="width: 200px;">
                <el-option
                  v-for="item in joblevelsSelect"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属部门" prop="departmentId">
              <el-select  @change="getEmps" v-model="addEmpParams.departmentId" placeholder="请选择部门"  style="width: 200px;" :clearable="true">
                <el-option
                  v-for="item in allDeps"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
<!--              <el-popover-->
<!--                placement="bottom"-->
<!--                title="请选择部门"-->
<!--                width="250"-->
<!--                trigger="manual"-->
<!--                v-model="popoverShow">-->
<!--                <el-tree-->
<!--                  :default-expand-all="true"-->
<!--                  :data = "allDeps"-->
<!--                  :props="depProps"-->
<!--                  @node-click="handleNodeClick"></el-tree>-->
<!--                <div-->
<!--                  slot="reference"-->
<!--                  style="width: 200px;display: inline-flex;border: 1px solid #dedede;-->
<!--                  height: 28px;border-radius: 5px;cursor: pointer;align-items: center;-->
<!--                  font-size: 13px;padding-left: 28px;box-sizing: border-box"-->
<!--                  @click="getDeparments"-->
<!--                >-->
<!--                  {{ inputDepName }}-->
<!--                </div>-->

<!--              </el-popover>-->
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="联系地址" prop="address">
              <el-input prefix-icon="el-icon-edit" style="width: 200px;" v-model="addEmpParams.address" placeholder="联系地址"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--         第四行-->
        <el-row>
          <el-col :span="6">
            <el-form-item label="工号" prop="workID">
              <el-input
                prefix-icon="el-icon-edit"
                style="width: 200px;"
                v-model="addEmpParams.workID"
                placeholder="工号"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="学历" prop="tiptopDegree">
              <el-select v-model="addEmpParams.tiptopDegree" placeholder="学历"  style="width: 200px;">
                <el-option
                  v-for="item in tiptopDegreeSelect"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="毕业院校" prop="school">
              <el-input prefix-icon="el-icon-edit" style="width: 200px;" v-model="addEmpParams.school" placeholder="毕业院校"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="专业名称" prop="specialty">
              <el-input prefix-icon="el-icon-edit" style="width: 200px;" v-model="addEmpParams.specialty" placeholder="专业名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--  第五行-->
        <el-row>
          <el-col :span="6">
            <el-form-item label="入职日期" prop="beginDate">
              <el-date-picker
                style="width: 200px;"
                v-model="addEmpParams.beginDate"
                type="date"
                placeholder="入职日期"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="转正日期" prop="conversionTime">
              <el-date-picker
                style="width: 200px;"
                v-model="addEmpParams.conversionTime"
                type="date"
                placeholder="转正日期"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="合同起始日期" prop="beginContract">
              <el-date-picker
                style="width: 200px;"
                v-model="addEmpParams.beginContract"
                type="date"
                placeholder="合同起始日期"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="合同截止日期" prop="endContract">
              <el-date-picker
                style="width: 200px;"
                v-model="addEmpParams.endContract"
                type="date"
                placeholder="合同截止日期"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <!--         第六行-->
        <el-row>
          <el-col :span="6">
            <el-form-item label="身份证号码" prop="idCard">
              <el-input prefix-icon="el-icon-edit" style="width: 200px;" v-model="addEmpParams.idCard" placeholder="身份证号码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="聘用方式" prop="engageForm">
              <el-select v-model="addEmpParams.engageForm" placeholder="聘用方式"  style="width: 200px;">
                <el-option
                  v-for="item in engageSelect"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="婚姻状况" prop="wedlock">
              <el-select v-model="addEmpParams.wedlock" placeholder="婚姻状况"  style="width: 200px;">
                <el-option
                  v-for="item in wedlockSelect"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="handleCancel">取 消</el-button>
    <el-button type="primary" @click="doAddEmp">确 定</el-button>
  </span>
  </el-dialog>
</div>
</template>

<script>
import employeeAPI from "../../api/employee";
import downloadAPI from "../../api/download"
export default {
  name: "EmpBasic",
  data(){
    return{
      advancedSearchShow:false,
      advancedSearchParams:{
        name:'',
        politicId:'',
        nationId:'',
        departmentId:'',
        posId:'',
      },
      beginDateScope:[],
      departmentName:'所属部门',
      headers:{
        Authorization: sessionStorage.getItem('token'),
      },
      uploadUrl: employeeAPI.uploadUrl,
      uploadDisabled: false,
      importBtnName: '导入数据',
      importBtnIcon: 'el-icon-upload2',
      selectInput:'',
      empData:[],
      loading: false,
      inputDepName:'所属部门',
      page:{
        pageSize:5,
        currentPage:1,
      },
      total:0,
      dialogVisible: false,
      depProps:{
        children: 'children',
        label: 'name'
      },
      allDeps:[],
      addEmpParams:{
        id: '',
        name: '',
        gender: '',
        birthday: '',
        idCard: '',
        wedlock: '',
        nationId: null,
        nativePlace: '',
        politicId: null,
        email: '',
        phone: '',
        address: '',
        departmentId: null,
        jobLevelId: null,
        posId: null,
        engageForm: '',
        tiptopDegree: '',
        specialty: '',
        school: '',
        beginDate: '',
        workState: '在职',
        workID: '',
        contractTerm: null,
        conversionTime: '',
        notWorkDate: null,
        beginContract: '',
        endContract: '',
        workAge: null,
        salaryId: null
      },
      nationsSelect:[], // 民族
      joblevelsSelect:[], // 职称
      politicsSelect:[], // 政治面貌
      positionSelect:[], // 职位
      popoverShow:false,
      title: '',
      engageSelect:[
        {
          value: '劳动合同',
          label: '劳动合同'
        },
        {
          value: '劳务合同',
          label: '劳务合同'
        }
      ],
      wedlockSelect:[
        {
          value: '未婚',
          label: '未婚'
        },
        {
          value: '已婚',
          label: '已婚'
        },
        {
          value: '离异',
          label: '离异'
        }
      ],
      tiptopDegreeSelect:[
        {
          value: '博士',
          label: '博士'
        },
        {
          value: '硕士',
          label: '硕士'
        },
        {
          value: '本科',
          label: '本科'
        },
        {
          value: '大专',
          label: '大专'
        }
      ],
      // 数据校验
      addEmpRules:{
        name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
        gender: [{required: true, message: '请输入性别', trigger: 'blur'}],
        birthday: [{required: true, message: '请输入出生日期', trigger: 'blur'}],
        idCard: [
          {required: true, message: '请输入身份证号', trigger: 'blur'},
          {pattern:/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
            messagee: '身份证号码格式不正确',
            trigger: 'blur'
          }
        ],
        wedlock: [{required: true, message: '请输入性别', trigger: 'blur'}],
        nationId: [{required: true, message: '请输入民族', trigger: 'blur'}],
        nativePlace: [{required: true, message: '请输入籍贯', trigger: 'blur'}],
        politicId: [{required: true, message: '请输入政治面貌', trigger: 'blur'},
          {type: 'number', message: '请输入政治面貌', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'},
          {type: 'email', message: '邮箱地址格式不正确', trigger: 'blur'}
        ],
        phone: [{required: true, message: '请输入电话号码', trigger: 'blur'}],
        address: [{required: true, message: '请输入员工地址', trigger: 'blur'}],
        departmentId: [{required: true, message: '请选择部门名称', trigger: 'blur'}],
        jobLevelId: [{required: true, message: '请选择职称', trigger: 'blur'}],
        posId: [{required: true, message: '请选择职位', trigger: 'blur'}],
        engageForm: [{required: true, message: '请选择聘用形式', trigger: 'blur'}],
        tiptopDegree: [{required: true, message: '请选择学历', trigger: 'blur'}],
        specialty: [{required: true, message: '请输入专业', trigger: 'blur'}],
        school: [{required: true, message: '请输入学校', trigger: 'blur'}],
        beginDate: [{required: true, message: '请输入入职日期', trigger: 'blur'}],
        workState: [{required: true, message: '请输入签退状态', trigger: 'blur'}],
        workID: [{required: true, message: '请输入工号', trigger: 'blur'}],
        contractTerm: [{required: true, message: '请输入合同期限', trigger: 'blur'}],
        conversionTime: [{required: true, message: '请输入转正日期', trigger: 'blur'}],
        notWorkDate: [{required: true, message: '请输入离职日期', trigger: 'blur'}],
        beginContract: [{required: true, message: '请输入合同起始日期', trigger: 'blur'}],
        endContract: [{required: true, message: '请输入合同截止日期', trigger: 'blur'}],
        workAge: [{required: true, message: '请输入工龄', trigger: 'blur'}],
      },
    }
  },
  methods:{
    exportExcel(){
      downloadAPI.downloadFile();
    },
    getEmps(){
      this.loading = true;
      employeeAPI.getAllEmp(this.page.currentPage, this.page.pageSize,this.advancedSearchParams,this.beginDateScope).then(res => {
        if (res){
          console.log(res);
          this.empData = res.data.data;
          this.total = res.data.total;
          this.loading = false;
        }
      })
    },
    // 一頁總條數變化
    handleSizeChange(val){
      console.log(val);
      this.page.pageSize = val;
      this.getEmps();
    },
    // 頁數變化
    handleCurrentChange(val){
      console.log(val);
      this.page.currentPage = val;
      this.getEmps();
    },
    // 添加員工處理
    handleAddEmp(){
      this.addEmpParams = {
          name: '',
          gender: '',
          birthday: '',
          idCard: '',
          wedlock: '',
          nationId: null,
          nativePlace: '',
          politicId: null,
          email: '',
          phone: '',
          address: '',
          departmentId: null,
          jobLevelId: null,
          posId: null,
          engageForm: '',
          tiptopDegree: '',
          specialty: '',
          school: '',
          beginDate: '',
          workState: '在职',
          workID: '',
          contractTerm: null,
          conversionTime: '',
          notWorkDate: null,
          beginContract: '',
          endContract: '',
          workAge: null,
          salaryId: null
      }; // 初始化表单数据
      this.inputDepName = ''; // 初始化部门数据
      this.title = '添加员工';
      this.dialogVisible = true; // 彈出對話框
      this.getPositions(); // 获取职位下拉数据
      this.getJobLevels(); // 获取职称下拉数据
      this.getNations(); // 获取民族下拉数据
      this.getPolitics(); // 获取政治面貌下拉数据
      this.getNewWorkId(); // 获取新工号
      this.getAllDeps(); // 获取所有部门数据
    },
    // 获取职位
    getPositions(){
      employeeAPI.getPositions().then(res => {
        if (res){
          this.positionSelect = res.data;
        }
      })
    },
    // 获取职称
    getJobLevels(){
      employeeAPI.getJobLevels().then(res => {
        if (res){
          this.joblevelsSelect = res.data;
        }
      })
    },
    // 获取民族
    getNations(){
      employeeAPI.getNations().then(res => {
        if (res){
          this.nationsSelect = res.data;
        }
      })
    },
    // 获取政治面貌
    getPolitics(){
      employeeAPI.getPolitics().then(res => {
        if (res){
          this.politicsSelect = res.data;
        }
      })
    },
    // 获取新工号
    getNewWorkId(){
      employeeAPI.getMaxWorkId().then(res => {
        if (res){
          this.addEmpParams.workID = res.data.obj;
        }
      })
    },
    // 获取部门 树形控件
    getDeparments(){
      if (!this.popoverShow){
        this.popoverShow = true;
        return;
      }
      this.popoverShow = false;
    },
    // 获取所有部门
    // getAllDeps(){
    //   employeeAPI.getAllDeps().then(res => {
    //     this.allDeps = res.data;
    //     console.log(res.data);
    //   })
    // },
    // 获取所有部门
    getAllDeps(){
      employeeAPI.getAllDeps().then(res => {
        // this.depOptions = res.data;
        this.getDep(res.data); // 递归
      })
    },
    // 递归操作
    getDep(data){
      data.map(item => {
        this.allDeps.push(item)
        if (item.children.length === 0){
          return ;
        }
        this.getDep(item.children)
      })
    },
    // 点击部门事件
    handleNodeClick(val){
      this.departmentName = val.name;
      this.advancedSearchParams.departmentId = val.id;
      this.popoverShow = false;
    },
    // 点击取消清空表单
    handleCancel(){
      this.dialogVisible = false;
    },
    // 添加员工操作
    doAddEmp(){
      // id存在值 为编辑状态
      if (this.addEmpParams.id){
        console.log("编辑");
        // 更新员工
        this.doUpdateEmp();
        return;
      }
      // 添加
      console.log("添加");
      this.$refs['empForm'].validate(valid => {
        if (valid){
          // 验证通过 添加员工
          employeeAPI.addEmp(this.addEmpParams).then(res => {
            if (res){
              this.dialogVisible = false;
              this.getEmps(); // 刷新表格数据
            }
          })
        }
      });
    },
    // 删除员工操作
    handleDelete(data){
      this.$confirm('此操作将永久删除['+data.name+']员工, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除员工
        this.deleteEmp(data);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    // 删除员工方法
    deleteEmp(data){
      employeeAPI.deleteEmp(data.id).then(res => {
        if (res){
          this.getEmps();
        }
      })
    },

    //更新员工操作
    handleUpdate(data){
      this.title = '编辑员工信息';
      this.addEmpParams = data; // 表单数据
      console.log(data);
      this.inputDepName = data.department.name
      this.dialogVisible = true; // 弹出框弹出
      this.getPositions(); // 获取职位下拉数据
      this.getJobLevels(); // 获取职称下拉数据
      this.getNations(); // 获取民族下拉数据
      this.getPolitics(); // 获取政治面貌下拉数据
      this.getNewWorkId(); // 获取新工号
      this.getAllDeps(); // 获取所有部门数据
    },

    // 更新员工方法
    doUpdateEmp(){
      this.$refs['empForm'].validate(valid => {
        if (valid){
          // 验证通过 添加员工
          employeeAPI.updateEmp(this.addEmpParams).then(res => {
            if (res){
              this.dialogVisible = false;
              this.getEmps(); // 刷新表格数据
            }
          })
        }
      });
    },

    // 上传文件处理
    beforeUpload(){
      this.importBtnIcon = 'el-icon-loading';
      this.importBtnName = '正在导入';
      this.uploadDisabled = true;
    },
    // 上传文件成功事件
    uploadSuccess(){
      this.importBtnIcon = 'el-icon-upload2';
      this.importBtnName = '导入数据';
      this.getEmps(); // 重新加载数据
      this.$message.success("导入成功");
      this.uploadDisabled = false;
    },
    // 上传文件失败事件
    uploadFail(){
      this.importBtnIcon = 'el-icon-upload2';
      this.importBtnName = '导入数据';
      this.$message.success("导入失败");
      this.uploadDisabled = false;
    },
    advancedSearch(){
      if (this.advancedSearchShow){
        this.advancedSearchShow = false;
        return;
      }
      this.advancedSearchShow = true;
      // 获取下拉框数据
      this.getPositions(); // 获取职位下拉数据
      this.getJobLevels(); // 获取职称下拉数据
      this.getNations(); // 获取民族下拉数据
      this.getPolitics(); // 获取政治面貌下拉数据
      this.getAllDeps(); // 获取所有部门数据
    },
    searchChange(){
      console.log(this.advancedSearchParams);
      // employeeAPI.get
    }

  },


  mounted() {
    this.getEmps();

  }
}
</script>

<style scoped>


</style>
